<template>
 <div id="app" style="background-color: white;padding: 5px">
     <div style="margin: 5px 0 20px 0;display: flex">
         <div style="margin: 0 10px 0 10px">
         <label>来源类型:</label>
         <a-select v-model="searchForm.appType" style="width: 120px" >
             <a-select-option :value="item.code" v-for="item in typeDict">{{item.label}}</a-select-option>
         </a-select>
         </div>
         <div style="margin: 0 10px 0 10px">
             <label>字段选择:</label>
             <a-select v-model="searchForm.query" style="width: 120px" >
                 <a-select-option v-if="item.dataIndex !== 'action'" v-for="item in columns" :value="item.dataIndex">{{item.title}}</a-select-option>
             </a-select>
         </div>
         <a-input-search placeholder="字段值" style="width: 200px" enter-button @search="initData" v-model="searchForm.queryValue" :loading="loading"></a-input-search>
         <a-button v-if="$auth('sys_user_edit')" type="primary" @click="() => { this.visible = true; this.$refs.appEdit.loading = true;this.$refs.appEdit.getOrgs()}" style="margin-left: 50px">
             新增
         </a-button>
     </div>
     <a-table
             :columns="columns"
             :data-source="tableData"
             :pagination="pagination"
             :loading="loading"
     >
         <!--<template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template>-->
         <!-- <span slot="appType" slot-scope="text, record">
           {{}}
         </span> -->
         <span slot="action" slot-scope="text, record">
        <template>
          <div>
            <a-button v-if="$auth('sys_user_edit')" type="primary" @click="handleModel(record.id)">
              编辑
            </a-button>
            <a-button
                    v-if="$auth('sys_user_del')"
                    style="margin-left: 8px"
                    type="danger"
                    @click="delApp(record.id)"
            >
              删除
            </a-button>
              <a-button style="margin-left: 8px" type="success" @click="to(record.id,record.appKey)">
                  密钥
              </a-button>
          </div>
        </template>
      </span>
     </a-table>
     <app-edit ref="appEdit" ></app-edit>
 </div>
</template>

<script>
    import {pages,deleteApp} from '@/api/application'
    import {listDict} from '@/api/dict'
    import AppEdit from './edit'
    export default {
    name: 'index',
      components:{
       AppEdit
      },
    data(){
      return {
        tableData: [],
        loading: false,
        visible: false,
        ids: [],
        typeDict: [],
        columns: [
          {
            title: '应用名称',
            dataIndex: 'appName'
          },
          {
            title: '应用类型',
            dataIndex: 'appType'
          },
          {
            title: '应用描述',
            dataIndex: 'appDesc'
          },
          {
            title: '服务信息',
            dataIndex: 'useRecursion'
          },
          {
            title: '研发单位',
            dataIndex: 'appRDUnit'
          },
          {
            title: '应用key',
            dataIndex: 'appKey'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
          }
        ],
        searchForm:{
          pageNo: 1,
          pageSize: 10,
          id:'',
          appType: '',
          query: '',
          queryValue: ''
        },
        pagination: {
          total: 0,
          defaultPageSize: 10, // 每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
          showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
        }
      }
    },
    mounted() {
      this.initData();
      this.getType();
    },
    methods:{
      to(id,key){
        this.$router.push({path:'/application/secret',query:{id:id,key: key}})
      },
      initData(){
        this.loading = true
        this.searchForm[this.searchForm.query] =  this.searchForm.queryValue
        pages(this.searchForm).then(response => {
          this.tableData = response.data.content
          this.loading = false
          console.log(response)
        })
      },
      handleModel(id){
        this.visible = true
        this.$refs.appEdit.loading = true
        this.$refs.appEdit.getOne(id)
        this.$refs.appEdit.getOrgs()
      },
      delApp(id){
        const _this = this;
        _this.$confirm({
          title: '确认删除',
          content: '删除后,应用下的密钥都将删除且不可恢复',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.ids.push(id)
            deleteApp(_this.ids).then(res => {
              if (res.code === '0') {
                _this.$message.success('删除成功')
                _this.initData()
              } else {
                _this.$message.error(res.message)
              }
            })
            _this.initData()
          },
          onCancel() {
            this.ids = []
          }
        })
      },
       getType(){
           listDict({label:'APP'}).then(response => {
             this.typeDict = response.data.content[0].children
             console.log(this.typeDict)
           })
         },
    },
  }
</script>

<style scoped>

</style>
